<pro-header style="position:relative;">

    <ng-template #tab >
         <span><i class="anticon anticon-pushpin-o"></i>&nbsp;{{profiles.profilesName}}</span>
         <nz-tabset style="position:relative;left: 50%;"  [nzSize]="'default'" [nzSelectedIndex]="SelectedIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs" >
                <ng-template #nzTabHeading>
                {{tab.name}}
                </ng-template>
            </nz-tab>
     </nz-tabset>
    </ng-template>
</pro-header>

<!-- 环境360导航界面 -->
<div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">

    <div nz-col [nzSpan]="widthLeft" class="mb-md">

        <nz-card   [nzBordered]="false">

            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                <!--<i class="anticon anticon-appstore-o" style="cursor: pointer;" (click)="toggleCollapsed()"></i>-->

                <span style="margin-left:5px" *ngIf='isShow'>运行环境基础信息</span>
                </div>

            </ng-template>
                <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>

                  <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                     <i class="anticon anticon-credit-card" nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>环境名称：</label>
                        <div nz-col [nzSpan]="19">{{profiles.profilesName}}</div>
                        </div>
                       </div>
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                            <i class="anticon  anticon-bars " nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label >流水标志：</label>
                                <div nz-col [nzSpan]="19">{{profiles.serialTag}}</div>
                           </div>
                  </div>


                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                       <i class="anticon anticon-user-add" nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label >主机IP：</label>
                                <div nz-col [nzSpan]="19">{{profiles.hostIp}}</div>
                           </div>
                  </div>
                     <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-bars"  nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>安装路径：</label>
                        <div nz-col [nzSpan]="19">{{profiles.installPath}}</div>
                        </div>
                       </div>
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-calendar" nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label >版本控制用户：</label>
                                <div nz-col [nzSpan]="19">{{profiles.csvUser}}</div>
                           </div>
                  </div>
                     <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                     <i class="anticon anticon-user" nz-col [nzSpan]="1"></i>

                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>环境管理人员：</label>
                        <div nz-col [nzSpan]="19">{{profiles.manager}}</div>
                        </div>
                       </div>
                        <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                     <i class="anticon anticon-user" nz-col [nzSpan]="1"></i>

                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>运行标志</label>
                        <div nz-col [nzSpan]="19">{{profiles.isRepeal}}</div>
                        </div>
                       </div>
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-windows-o" nz-col [nzSpan]="1"></i>

                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label >打包窗口：</label>
                                <div nz-col [nzSpan]="19">  <nz-tag style="margin-bottom:5px;" *ngFor='let i of profiles.packTiming' [nzColor]="i.isOpen==='true'?'#108ee9':''">{{i.time}}</nz-tag></div>
                         </div>
                  </div>
                    <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                   <i class="anticon anticon-fork" nz-col [nzSpan]="1"></i>

                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>Release分支：</label>
                        <div nz-col [nzSpan]="18">{{profiles.branch}}</div>
                        </div>
                       </div>

 <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                   <i class="anticon anticon-fork" nz-col [nzSpan]="1"></i>

                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>延期标志：</label>
                        <div nz-col [nzSpan]="18">开启</div>
                        </div>
                       </div>

            </ng-template>

        </nz-card>


    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card   [nzBordered]="false" >
            <router-outlet></router-outlet>
        </nz-card>
    </div>

</div>
